import { computed, ref, watchEffect } from 'vue'
import gsap from 'gsap'
const colors = ["#334552", "#B34335", "#6E9FA5", "#A2C3AC", "#C8846C"];
export default function useGdp(gdpRef, maxSize) {
    const maxValue = computed(() => {
        if (gdpRef.value.length) {
            return Math.max(...gdpRef.value.map(it => it.value))
        }
        return 0
    })
    const bars = ref([])
    const barsTarget = computed(() => {
        return gdpRef.value.map((it, i) => ({
            ...it,
            size: it.value / maxValue.value * maxSize,
            color: colors[i % colors.length]
        }))
    })
    watchEffect(() => {
        // 把bars重当前状态变化到目标状态barsTarget
        for (let i = 0; i < barsTarget.value.length; i++) {
            if (!bars.value[i]) {
                bars.value[i] = {
                    ...barsTarget.value[i],
                    size: 0,
                    value: 0
                }
            }
            // bars.value[i].size 逐步变化到  barsTarget.value[i].size
            gsap.to(bars.value[i], {
                // size: barsTarget.value[i].size,
                // value: barsTarget.value[i].value,
                ...barsTarget.value[i],
                duration: 1
            })
        }
    })
    return { bars }
}